<template>
    <div class="box">

        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <div>
                    <van-field v-model="demandType" is-link readonly label="事件类别" placeholder="请选择"
                        @click="showPickerDemandType = true" :rules="[{ required: true, message: '请选择事件类别' }]" />
                    <van-popup v-model:show="showPickerDemandType" round position="bottom">
                        <van-picker :columns="levelColumnsDemandType" :default-index="levelColumnsDemandType.length/2>2?2:(levelColumnsDemandType.length%2==0?levelColumnsDemandType.length/2:(levelColumnsDemandType.length-1)/2)"
                            :columns-field-names="{ text: 'ryD_DemandTypeName', value: 'ryD_DemandTypeNo' }"
                            @cancel="showPickerDemandType = false" @confirm="onConfirmType" />
                    </van-popup>
                </div>
                <div>
                    <van-field v-model="demandLevel" is-link readonly label="重要级别" placeholder="请选择"
                        @click="showPicker = true" :rules="[{ required: true, message: '请选择事件重要级别' }]" />
                    <van-popup v-model:show="showPicker" round position="bottom">
                        <van-picker :columns="levelColumns"
                            :columns-field-names="{ text: 'ryD_DemandLevelName', value: 'ryD_DemandLevelNo' }"
                            @cancel="showPicker = false" @confirm="onConfirm" />
                    </van-popup>
                </div>

            </van-cell-group>
            <van-cell-group inset>
                <van-field v-model="from.RYD_UserName" name="RYD_UserName" disabled label="姓名" placeholder="请输入姓名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="from.RYD_UserAddress" name="RYD_Address" label="位置" placeholder="请输入所在位置"
                    :rules="[{ required: true, message: '请填写所在位置' }]" />
                <van-field v-model="from.RYD_UserIp" name="RYD_UserIp" label="IP地址" placeholder="请输入设备IP地址，可为空" />

                <van-field v-model="from.RYD_UserPhone" name="RYD_UserPhone" label="联系方式" placeholder="请输入分机号或者手机号"
                    :rules="[{ required: true, message: '请填写联系方式' }]" />

            </van-cell-group>
            <van-cell-group inset>
                <van-field v-model="from.RYD_DemandDetails" name="RYD_DemandDetails" rows="4" autosize label="需求详情"
                    type="textarea" placeholder="请输入需求详情" :rules="[{ required: true, message: '请填写需求详情' }]" />
            </van-cell-group>
            <van-cell-group inset>
                <van-field name="RYD_FilesT" label="文件上传">
                    <template #input>
                        <van-uploader v-model="from.RYD_FilesT" :max-count="3" multiple preview-size="15.5vw" />
                    </template>
                </van-field>
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" v-if="route.query.RYD_DemandId != null">
                    重新提交
                </van-button>
                <van-button round block type="primary" native-type="submit" v-else>
                    提交
                </van-button>
            </div>
        </van-form>



        <van-overlay :show="loading" style="margin: 0;">
            <div class="wrapper">
                <van-loading type="spinner" size="5vh" vertical color="#fff">加载中...</van-loading>
            </div>
        </van-overlay>
    </div>
</template>

<script>
export default {

}
</script>

<script setup>

import { inject, ref } from 'vue';
import axios from '@/utils/axios'
// eslint-disable-next-line no-unused-vars
import { Notify, Dialog, Toast } from 'vant'

import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();


let nav = inject('nav');
nav.showLeft = true;
nav.textLeft = '返回';
nav.title = 'ITSM 需求申请';
nav.showRight = false;




const levelColumns = ref();
const levelColumnsDemandType = ref();
const showPicker = ref(false);
let loading = ref(true);
let demandLevel = ref();
let demandType = ref();
let RYD_UserId = inject('RYD_UserId');
let showPickerDemandType = ref(false)

let from = ref({
    RYD_UserId: RYD_UserId,
    RYD_Company: '',
    RYD_Level: '',
    RYD_TypeId: '',
    RYD_DemandDetails: '',
    RYD_FilesT: [],
    RYD_UserName: '',
    RYD_UserPhone: '',
    RYD_UserAddress: '',
    RYD_UserIp: '',
});
initData();
function initData() {

    Promise.all(
        [
            axios({
                method: 'get',
                url: '/api/DemandLevels',
            }).then(res => {
                levelColumns.value = res;
            }),

            axios({
                method: 'get',
                url: '/api/GetCompany?RYD_UserId=' + RYD_UserId
            }).then(res => {
                from.value.RYD_Company = res;
                axios({
                    method: 'get',
                    url: '/api/GetDemandTypes?RYD_Company=' + res,
                }).then(res => {
                    levelColumnsDemandType.value = res;
                })
            }),

            axios.get("/api/GetUserInfo?RYD_UserId=" + RYD_UserId).then(res => {
                from.value.RYD_UserName = res.realName;
            })
        ]
    ).then(res => {
        loading.value = false;
        if (route.query.RYD_DemandId != null) {
            axios({
                method: 'get',
                url: '/api/DemandInfo?RYD_DemandId=' + route.query.RYD_DemandId
            }).then(res => {
                // from.value.RYD_UserName = res.ryD_UserName;
                from.value.RYD_UserAddress = res.ryD_UserAddress;
                from.value.RYD_UserIp = res.ryD_UserIp;
                from.value.RYD_UserPhone = res.ryD_UserPhone;
                from.value.RYD_TypeId = res.ryD_TypeId;

                levelColumnsDemandType.value.forEach(element => {
                    if (element.ryD_DemandTypeNo == res.ryD_TypeId) {

                        demandType.value = element.ryD_DemandTypeName;
                    }
                });
                levelColumns.value.forEach(element => {
                    if (element.ryD_DemandLevelNo == res.ryD_Level) {

                        demandLevel.value = element.ryD_DemandLevelName;
                    }
                });
                from.value.RYD_Level = res.ryD_Level + '';
                from.value.RYD_DemandDetails = res.ryD_DemandDetails;
                if (res.ryD_Files != null && res.ryD_Files != "") {

                    // urlImage = res.ryD_Files;
                    // if (urlImage != null) {
                    //     urlImage += "|";
                    // }
                    res.ryD_Files.split('|').forEach(element => {
                        from.value.RYD_FilesT.push(
                            {
                                url: element
                            }
                        );
                    });
                }
                // loadingInfo.value = false;
            })
        } else {
            axios({
                method: 'get',
                url: '/api/GetLastDemand?RYD_Id=' + RYD_UserId,
            }).then(res => {
                if (res != null && res != "") {
                    Dialog.confirm({
                        title: '提示',
                        message: '是否使用上一次的基础信息：' +
                            '\n姓名：' + res.ryD_UserName +
                            '\n位置：' + res.ryD_UserAddress +
                            '\nIP地址：' + res.ryD_UserIp +
                            '\n联系方式：' + res.ryD_UserPhone
                        ,
                    })
                        .then(() => {
                            // on confirm

                            from.value.RYD_UserName = res.ryD_UserName;
                            from.value.RYD_UserAddress = res.ryD_UserAddress;
                            from.value.RYD_UserIp = res.ryD_UserIp;
                            from.value.RYD_UserPhone = res.ryD_UserPhone;
                        })
                        .catch(() => {
                            // on cancel
                        });
                }
            })
        }

    })
}
const onConfirm = (res) => {
    demandLevel.value = res.ryD_DemandLevelName;
    from.value.RYD_Level = res.ryD_DemandLevelNo;
    showPicker.value = false;
};
const onConfirmType = (res) => {
    demandType.value = res.ryD_DemandTypeName;
    from.value.RYD_TypeId = res.ryD_DemandTypeNo;
    showPickerDemandType.value = false;
};

function onSubmit(values) {
    loading.value = true;
    if (route.query.RYD_DemandId != null) {
        axios({
            method: 'post',
            url: '/api/Demand2',
            data: {
                ...from.value,
                RYD_DemandId: route.query.RYD_DemandId
            }
        }).then(res => {
            loading.value = false;

            if (res != "") {
                Dialog.alert({
                    message: '需求提交成功，已将需求内容分配给IT人员，请等待IT处理。',
                }).then(() => {
                    // on close
                    if(nav.textLeft=="主页"){
                        router.replace("AndroidHomePage")
                    }else{
                        router.back();
                    }
                });
            } else {
                Toast.fail({ overlay: true, message: '错误' })
            }

        }).catch(() => {
            loading.value = false;
            Toast.fail({ overlay: true, message: '错误' })
        })
    } else {
        axios({
            method: 'post',
            url: '/api/Demand',
            data: {
                ...from.value
            }
        }).then(res => {
            loading.value = false;

            if (res != "") {
                Dialog.alert({
                    message: '需求提交成功，已将需求内容分配给IT人员，请等待IT处理。',
                }).then(() => {
                    // on close
                    if(nav.textLeft=="主页"){
                        router.replace("AndroidHomePage")
                    }else{
                        router.back();
                    }
                });
            } else {
                Toast.fail({ overlay: true, message: '错误' })
            }
        }).catch(() => {
            loading.value = false;
            Toast.fail({ overlay: true, message: '错误' })
        })
    }

}

</script>

<style scoped>
.box .van-cell-group {
    margin-top: 2vh;
}
</style>